import React, {Row, Col, Component, useEffect, useState } from "react";
import { Popover } from 'antd';
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import {
    ArrowRightOutlined,
	CloseOutlined
} from "@ant-design/icons";

const DragList = ({ history, checkedFilelds, setCheckedFields, onUpdateFields}) => {
    const reorder = (list, startIndex, endIndex) => {
        const result = Array.from(list);
        const [removed] = result.splice(startIndex, 1);
        result.splice(endIndex, 0, removed);
        return result;
    };

    const getItemStyle = (isDragging, draggableStyle) => ({
        userSelect: "none",
        cursor: 'pointer',
        height: '38px',
        lineHeight: '38px',
        padding: '0 0 0 10px',
        position: 'relative',
        ...draggableStyle
    });

    const getListStyle = (isDraggingOver) => ({
        position: "relative",
        width: 'calc(100% - 5px)',
        height: 'calc(100% - 60px)',
        paddingLeft: "15px",
        overflow: "auto"
    });

    const queryAttr = "data-rbd-drag-handle-draggable-id";

	const [placeholderProps, setPlaceholderProps] = useState({});

	const onDragEnd = result => {
		//超出边界
		if (!result.destination) {
			return;
		}
        setPlaceholderProps({})
		setCheckedFields(checkedFilelds => reorder(checkedFilelds, result.source.index, result.destination.index));
	};

	const onDragUpdate = update => {
        if(!update.destination){
            return;
        }
		const draggableId = update.draggableId;
		const destinationIndex = update.destination.index;

		const domQuery = `[${queryAttr}='${draggableId}']`;
		const draggedDOM = document.querySelector(domQuery);

		if (!draggedDOM) {
			return;
		}
		const { clientHeight, clientWidth } = draggedDOM;

		const clientY = parseFloat(window.getComputedStyle(draggedDOM.parentNode).paddingTop) + [...draggedDOM.parentNode.children]
			.slice(0, destinationIndex)
			.reduce((total, curr) => {
				const style = curr.currentStyle || window.getComputedStyle(curr);
				const marginBottom = parseFloat(style.marginBottom);
				return total + curr.clientHeight + marginBottom;
			}, 0);

        setPlaceholderProps({
            clientHeight,
            clientWidth,
            clientY,
            clientX: parseFloat(window.getComputedStyle(draggedDOM.parentNode).paddingLeft)
        });
	};

	return (
		<DragDropContext onDragEnd={onDragEnd} onDragUpdate={onDragUpdate}>
			<Droppable droppableId="droppable" >
				{(provided, snapshot) => (
                    <div className="left-columns"
                        {...provided.droppableProps}
                        ref={provided.innerRef}
                        style={getListStyle(snapshot.isDraggingOver)}
                    >
                    {checkedFilelds.map((item, index) => {
                        return (
                            <div key={index}>
                            <Draggable id={index} draggableId={item.propertyKey} key={item.propertyKey} index={index}>
                                {(provided, snapshot) => {
                                   return( 
                                    <div
                                        ref={provided.innerRef}
                                        {...provided.draggableProps}
                                        {...provided.dragHandleProps}
                                        style={getItemStyle(
                                            snapshot.isDragging,
                                            provided.draggableProps.style
                                        )}
                                    >
                                        <span className="field-list-item">{item.title}</span>
                                        {item.woIsSystem == 1 ?  null:<CloseOutlined style={{display: "inline-block"}} onClick={()=>{onUpdateFields(item)}}/>}
                                    </div>
                                    )
                                }}
                            </Draggable>
                            </div>
                        );
                    })}
				{provided.placeholder}
            {/* <CustomPlaceholder snapshot={snapshot} /> */}
                <div style={{
                    position: "absolute",
                    top: placeholderProps.clientY,
                    left: placeholderProps.clientX,
                    height: placeholderProps.clientHeight,
                 //   background: "#C6E2FF",
                    width: placeholderProps.clientWidth
                }}/>
                </div>
            )}
			</Droppable>
		</DragDropContext>
	);
};

export default DragList;